<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CANHE-WORKS</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar">
        <div class="logo">仁善慈悲帝</div>
        <div class="menu-toggle" id="menuToggle">
            <div class="bar"></div>
            <div class="bar"></div>
            <div class="bar"></div>
        </div>
        <ul class="nav-links" id="navLinks">
            <li><a href="index.html">首页</a></li>
            <li><a href="works.html" class="active">作品</a></li>
            <li><a href="exercise.html">练习</a></li>
            <li><a href="about-contact.html">关于</a></li>
            <li><a href="journal.html">日志</a></li>
        </ul>
    </nav>

    <!-- 作品展示区域 -->
    <section id="works" class="works">
        <!-- 固定标题 -->
        <div class="fixed-titles">
            <h1 class="main-title art-title" id="artTitle">Art</h1>
            <h1 class="main-title design-title" id="designTitle">Design</h1>
        </div>

        <div class="works-container">
            <div class="works-column art-works">

                <div class="work-item fullscreen-item">
                    <div class="work-image">
                        <img src="images/work/artwork1/artwork1.jpg" alt="艺术作品1">
                        <div class="work-overlay">
                            <h3>抽象系列 #1</h3>
                            <p>混合媒介艺术</p>
                        </div>
                    </div>
                </div>
                <div class="work-item fullscreen-item">
                    <div class="work-image">
                        <img src="images/work/artwork2/artwork2.jpg" alt="艺术作品2">
                        <div class="work-overlay">
                            <h3>自然解构</h3>
                            <p>装置艺术</p>
                        </div>
                    </div>
                </div>
                <div class="work-item fullscreen-item">
                    <div class="work-image">
                        <img src="images/work/artwork3/31191756681987_.pic_hd.jpg" alt="艺术作品3">
                        <div class="work-overlay">
                            <h3>城市光影</h3>
                            <p>摄影系列</p>
                        </div>
                    </div>
                </div>
                <div class="work-item fullscreen-item">
                    <div class="work-image">
                        <img src="images/work/artwork4/artwork4.jpg" alt="艺术作品4">
                        <div class="work-overlay">
                            <h3>时间碎片</h3>
                            <p>多媒体艺术</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="works-column design-works">

                <div class="work-item fullscreen-item">
                    <div class="work-image">
                        <img src="images/work/designwork1/designwork1.jpg" alt="设计作品1">
                        <div class="work-overlay">
                            <h3>极简品牌识别</h3>
                            <p>品牌设计</p>
                        </div>
                    </div>
                </div>
                <div class="work-item fullscreen-item">
                    <div class="work-image">
                        <img src="images/work/designwork2/designwork2.jpg" alt="设计作品2">
                        <div class="work-overlay">
                            <h3>沉浸式网站体验</h3>
                            <p>网页设计</p>
                        </div>
                    </div>
                </div>
                <div class="work-item fullscreen-item">
                    <div class="work-image">
                        <img src="images/work/designwork3/deisgnwork3.jpg" alt="设计作品3">
                        <div class="work-overlay">
                            <h3>可持续包装系统</h3>
                            <p>包装设计</p>
                        </div>
                    </div>
                </div>
                <div class="work-item fullscreen-item">
                    <div class="work-image">
                        <img src="images/work/designwork4/designwork4.jpg" alt="设计作品4">
                        <div class="work-overlay">
                            <h3>用户体验重设计</h3>
                            <p>交互设计</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 页脚 -->
    <footer class="footer">
        <div class="footer-content">
            <p>&copy; 仁善慈悲帝保留所有权利.</p>
        </div>
    </footer>

    <script src="script.js"></script>
</body>
</html>